<template>
	<view style="height: 100%;">
		<view class="body" v-if='pageLoad'>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="background Skeleton">
					<view class="introduce viewWidth">
						<view class="titleBox">
							<view style="height: 40rpx;flex: 0.9;" class="Skeleton" />
							<view style="width: 100rpx;height: 100rpx;" class="Skeleton"></view>
						</view>
						<view class="avatarBox Skeleton" style="height: 40rpx;" />
						<view class="buttonBox">
							<view style="height: 80rpx;" class="Skeleton" />
							<view style="height: 80rpx;" class="Skeleton" />
						</view>
					</view>
				</view>
				<view class="viewWidth iconBox Skeleton" style="height: 60rpx;margin-bottom: 20rpx;" />
				<view class="viewWidth iconBox Skeleton" style="height: 60rpx;margin-bottom: 20rpx;" />
				<view class="title viewWidth">
					<view style="height: 40rpx;width: 30%;" class="Skeleton"></view>
				</view>
				<view class="activeBox viewWidth Skeleton" />
				<view class="title viewWidth">
					<view style="height: 40rpx;width: 30%;" class="Skeleton"></view>
				</view>
				<view class="viewWidth">
					<view v-for="item in 10" style="height: 24rpx;margin-bottom: 20rpx;" class="Skeleton" :key="item" />
				</view>
			</scroll-view>
		</view>
		<view class="body" v-else>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="background">
					<image mode="aspectFill" :src='detail.background' />
					<view class="introduce viewWidth">
						<view class="titleBox">
							<view>
								<u-text lines='2' :text='detail.name' size='36rpx' />
							</view>
							<image :src="detail.logo"></image>
						</view>
						<view class="avatarBox">
							<u-avatar-group :urls="user" size="40" gap="0.4"></u-avatar-group>
							<view>
								{{userTotal}}个粉丝
							</view>
						</view>
						<view class="buttonBox">
							<view>
								<u-button color="#3975c6" @click='contact'>免费咨询</u-button>
							</view>
							<view>
								<u-button color="#3975c6" @click='$emit("click",1)'>查看案例</u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="viewWidth iconBox" @click="makePhoneCall">
					<u-icon name='phone-fill' size='50rpx' />
					<view>
						<u-text lines='1' :text='detail.mobile' size='28rpx' />
					</view>
					<u-icon name='arrow-right' size='50rpx' />
				</view>
				<view class="viewWidth iconBox" @click="map">
					<u-icon name='map-fill' size='50rpx' />
					<view>
						<u-text lines='1' :text='detail.address' size='28rpx' />
					</view>
					<u-icon name='arrow-right' size='50rpx' />
				</view>
				<view class="title viewWidth">
					服务动态
				</view>
				<view class="activeBox viewWidth">
					<swiper style="height: 100%;" circular autoplay vertical>
						<swiper-item v-for="(item,index) in userList" :key="index" class="activeItem">
							<view class="activeIcon">
								<view>
									预约动态
								</view>
							</view>
							<view class="activeUser">
								<u-avatar v-if="item.user" :src='item.user.avatar' size='40rpx' />
								<text style="margin-left: 10rpx;">
									浏览用户{{item.user.nick_name}}预约的我们的定制服务
								</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="title viewWidth">
					公司简介
				</view>
				<view class="viewWidth">
					{{detail.description}}
				</view>
				<view class="title viewWidth">
					详细介绍
				</view>
				<view class="viewWidth">
					<u-parse :content="detail.introduction"></u-parse>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				userLoading: true,
				userTotal: 0,
				user: [],
				userList: [],
				detail: {}
			}
		},
		computed: {
			pageLoad() {
				return this.loading || this.userLoading
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			})
			this.$api.Shop.Detail_C().then(res => {
				this.detail = res.data.company
				uni.hideLoading()
				this.loading = false
			}).catch(err => {
				uni.hideLoading()
				uni.$u.toast(err.message)
			})
			this.$api.Shop.Members.List({
				page: 1,
				size: 20
			}).then(res => {
				this.user = res.data.users.data.map(item => item.user?.avatar)
				this.userList = res.data.users.data
				this.userTotal = res.data.users.total
				this.userLoading = false
			}).catch(err => {
				uni.$u.toast(err.message)
			})
		},
		methods: {
			contact() {
				if (this.detail.contact && this.detail.work_wechat_id) {
					wx.openCustomerServiceChat({
						extInfo: {
							url: this.detail.contact
						},
						corpId: this.detail.work_wechat_id,

					})
				} else {
					uni.makePhoneCall({
						phoneNumber: this.detail.mobile //仅为示例
					});
				}
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.detail.mobile //仅为示例
				});
			},
			map() {
				let plugin = requirePlugin('routePlan');
				const accountInfo = wx.getAccountInfoSync();
				const app_id = accountInfo.miniProgram.appId
				const key = '5P7BZ-I74RV-QYBPH-5J6M4-QGZF5-RIBAN'; //使用在腾讯位置服务申请的key
				const referer = app_id //调用插件的app的名称
				let endPoint = JSON.stringify({ //终点
					'name': this.detail.address,
					'latitude': this.detail.coordinates.lat,
					'longitude': this.detail.coordinates.lng
				});
				uni.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100%;
		overflow: hidden;
	}

	.background {
		height: 500rpx;
		position: relative;
		margin-bottom: 130rpx;

		>image {
			width: 100%;
			height: 100%;
		}
	}

	.introduce {
		position: absolute;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx #ddd;
		min-height: 400rpx;
		left: 0;
		right: 0;
		top: 200rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.titleBox {
		display: flex;
		width: 100%;
		justify-content: space-between;

		>view {
			font-size: 36rpx;
			font-weight: 400;
		}

		>image {
			min-width: 100rpx;
			min-height: 100rpx;
			max-width: 100rpx;
			max-height: 100rpx;
		}
	}

	.avatarBox {
		display: flex;
		align-items: center;
		margin-top: 40rpx;

		>view:nth-child(2) {
			margin-left: 10rpx;
		}
	}

	.buttonBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		>view {
			flex: 0.48;
		}
	}

	.iconBox {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #ddd;
		padding: 20rpx 0;
		align-items: center;

		>view:nth-child(2) {
			flex: 1;
			margin: 0 20rpx;
		}
	}

	.title {
		font-size: 30rpx;
		font-weight: 600;
		margin: 40rpx auto !important;
	}

	.activeBox {
		box-shadow: 0 0 10rpx #ddd;
		background-color: #fff;
		border-radius: 8rpx;
		height: 160rpx;

	}

	.activeItem {
		display: flex;
		align-items: center;
		width: 100%;
		height: 160rpx;
		padding: 20rpx;
		box-sizing: border-box;

	}

	.activeIcon {
		background-color: rgba(57, 117, 198, 0.2);
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		border-radius: 50rpx;
		min-width: 142rpx;

		>view {
			font-size: 35rpx;
			background: linear-gradient(to right bottom, #357ABE, #48B0FF, #356CBE);
			color: transparent;
			font-weight: 600;
			/*文字颜色为透明*/
			background-clip: text;
			/*以文字截切背景*/
		}
	}

	.activeUser {
		display: flex;
	}

	.viewWidth {
		width: 92vw;
		margin: 0 auto;
	}
</style>